<template>
    <div class="modal fade" id="selectUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 950px;">
            <div class="modal-content" style="text-align: center;width: 950px;">
                <div class="modal-header">
                    <button type="button" class="close" @click="closeSelectUserModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择人员</h4>
                </div>
                <div class="modal-body">
                    <div class="main-content" >
                        <div class="row">
                            <div class="col-sm-4 col-md-4" style="border-right: 1px solid #ccc;height: 600px;">
                                <ul class="template-title-fls">
                                    <li><input type="text" v-model="searchDeptModel.deptName" id="key"  class="form-control" style="width:100%;" placeholder="请输入机构名称" /></li>
                                    <li><button type="button" class="btn btn-default btn-theme" style="width:70px;height:34px;" v-on:click="queryDetpByDeptName()">查找</button></li>
                                </ul>
                                <ul id="orgTree" class="ztree"></ul>
                                <span id="orgTreeText" style="padding-left: 10px;font-weight: bolder;display: none;">没有搜索到该部门</span>
                            </div>
                            <div class="col-sm-8 col-md-8">
                                <form id="searchForm">
                                    <ul class="template-title-fls">
                                        <li><input type="text" v-model="searchContent" class="form-control" style="width: 505px;" placeholder="员工姓名、手机号" /></li>
                                        <li><button type="button" class="btn btn-default btn-theme" style="width:70px;height:34px;" v-on:click="loadPartnerByDept()">查找</button></li>
                                    </ul>
                                </form>
                                <div class="table-responsive" style="height: 558px;overflow-y: scroll;">
                                    <div v-if="rows != null && rows.length > 0" v-for="(item,index) in rows" :key="index" class="userInfoItem" @click="chooseUser(item)">
                                        <div class="leftContent">
                                            <img src="../../assets/images/photo.svg" alt="头像">
                                        </div>
                                        <div class="rightContent">
                                            <div class="top"><span class="name">{{item.accountName}}</span>&nbsp;&nbsp;&nbsp;<span>{{item.phone}}</span></div>
                                            <div class="bottom"><span>{{item.dempName}}&nbsp;&nbsp;{{item.roleName?item.roleName:'超级管理员'}}</span></div>
                                        </div>
                                    </div>
                                    <div v-else>没有搜索到该员工</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ztreeCore from '../../assets/js/zTree/jquery.ztree.core-3.5.min.js'
	import ztreeAll from '../../assets/js/zTree/jquery.ztree.all.min.js'
	import ztreeHide from '../../assets/js/zTree/jquery.ztree.exhide.js'
    export default {
        data(){
            return{
                loginInfo: {
                    userId: window.localStorage.getItem("1_userId"),
                    isLogin: window.localStorage.getItem("1_isLogin"),
                    accountType: window.localStorage.getItem("1_accountType")
                },
                orgTreeData: [],
                rows: [],
                searchContent: '',
                searchDeptModel: {
                    deptName: ''
                },
                nodeList:[],
                // freshFlag: 
            }
        },
        watch: {
            '$store.getters.freshSelectUserData': {
                handler (val, oldVal) {
                    if(val){
                        this.searchContent = '';
                        this.loadOrgTreeData();
                    }
                },
                deep: true
            }
        },
        mounted(){
            this.loadOrgTreeData();
        },
        methods:{
            closeSelectUserModal () {
                this.$store.commit('set_freshSelectUserData','')
                $('#selectUserModal').modal('hide');
            },
            chooseUser (obj) {
                this.$store.commit('set_freshSelectUserData','')
                let type = this.$store.getters.selectUserDataType
                if(type == 'chief') {
                    this.$store.commit('set_selectUserDataChiefName',obj.accountName)
                    this.$store.commit('set_selectUserDataChiefPhone',obj.phone)
                } else if(type == 'manager') {
                    this.$store.commit('set_selectUserDataManagerName',obj.accountName)
                    this.$store.commit('set_selectUserDataManagerPhone',obj.phone)
                }
                $('#selectUserModal').modal('hide');
            },
            loadOrgTreeData () {
                var _self = this;
                //ztree基础属性设置
                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: _self.zreeOnClick
                    }
                };
                var body = {};
                body.params = {};
                var url = _self.utilHelper.apiUrl + "/api/getDeptTree";
                _self.$http.post(url, body).then((response) => {
                    var resData = response.body.resData;
                    var nodesList = resData.nodesList;
                    var result = resData.result;
                    $.fn.zTree.init($("#orgTree"), setting, nodesList);
                    _self.searchDeptModel.deptName = '';
                    //机构树加载成功后,加载经纪人数据
                    _self.loadPartnerByDept();
                }, (response) => {

                });
            },
            zreeOnClick (event, treeId, treeNode) {
                this.loadPartnerByDept();
            },
            loadPartnerByDept() {
                //根据机构信息，获取用户
                var _self = this;
                var params = {};
                params["pageNo"] = 1;
                params["pageSize"] = 999999;
                params["searchContent"] = _self.searchContent;
                params["status"] = '1';
                var treeObj = $.fn.zTree.getZTreeObj("orgTree");
                if(treeObj) {
                    var node = treeObj.getSelectedNodes();
                    if(node.length > 0) {
                        var childNodes = treeObj.transformToArray(node);
                            var nodes = '';
                            for(var i = 0; i < childNodes.length; i++) {
                            nodes += parseInt(childNodes[i].id)+',';
                            }
                            params["deptIds"] = nodes.substring(0,nodes.lastIndexOf(','));
                    }
                }
                var body = {};
                body.params = params;
                var url = this.utilHelper.apiUrl + "/api/getDevPartnerPage";
                this.$http.post(url, body).then((response) => {
                    var resData = response.body.resData;
                    var rows = resData.page.rows;
                    _self.rows = rows;
                }, (response) => {
                    console.log("加载用户失败");
                });
            },
            queryDetpByDeptName () {
                var _self = this;
                var node_type = 'name';
                var treeObj = $.fn.zTree.getZTreeObj("orgTree");  
                var allNode = treeObj.transformToArray(treeObj.getNodes());
                treeObj.hideNodes(allNode);
                
                var keywords = _self.searchDeptModel.deptName;
                if (keywords == "") {
                    $('#orgTreeText').hide();
                    treeObj.showNodes(allNode);
                    treeObj.expandAll(false);
                } else {
                    //_self.nodeList = treeObj.getNodesByParamFuzzy("text", keywords, null);
                    _self.nodeList = treeObj.getNodesByFilter(_self.filterFunc);
                    _self.nodeList = treeObj.transformToArray(_self.nodeList);
                    for (var n in _self.nodeList) {
                        if (_self.nodeList.hasOwnProperty(n)) {
                            _self.findParent(treeObj, _self.nodeList[n]);
                        }
                    }
                    if(_self.nodeList.length > 0) {
                        $('#orgTreeText').hide();
                        treeObj.showNodes(_self.nodeList);
                    }else {
                        $('#orgTreeText').show();
                    }
                }
            },
            filterFunc (node) {
                var _self = this;
                var keywords = _self.searchDeptModel.deptName;
                if ( node.name.indexOf(keywords) != -1) return true;
                return false;
            },
            findParent (treeObj,node) { 
                var _self = this; 
                var treeObj = $.fn.zTree.getZTreeObj("orgTree"); 
                treeObj.expandNode(node, true, false, false);
                var pNode = node.getParentNode();
                if (pNode != null) {
                    _self.nodeList.push(pNode);
                    _self.findParent(treeObj, pNode);
                }
            }
        }
    }
</script>

<style scoped>
 .userInfoItem {width: 50%;height:60px;border-radius: 3px;float:left;margin: 10px 0;}
 .userInfoItem:hover {background: #F2F2F2;}
 .leftContent {float: left;text-align: center;margin: 0 auto;width: 80px;}
 .leftContent img {width: 60px;height: 60px;}
 .rightContent {float: left;color: #999999;text-align: left;width: 210px;}
 .rightContent .top {height: 30px;line-height: 35px;}
 .rightContent .top .name{font-size: 14px;color: #000;}
 .rightContent .bottom {height: 30px;line-height: 25px;}
</style>